<template>
  <component :is="tag" :style="styleProps" class="l-text-component" @click="handleClick">
    {{ text }}
  </component>
</template>
<script lang="ts" setup>
import { textDefaultProps, textStylePropNames, transformToComponentProps } from '@/utils/defaultProps'
import useComponentCommon from '../hooks/useComponentCommon'
const defaultProps = transformToComponentProps(textDefaultProps)

defineOptions({
  name: 'l-text'
})

const props = defineProps({
  tag: {
    type: String,
    default: 'div'
  },
  ...defaultProps
})
// 重用并且简化
// 抽离并且获得 styleProps
const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames)
</script>

<style scoped>
h2.l-text-component,
p.l-text-component {
  margin-bottom: 0;
}

button.l-text-component {
  padding: 5px 10px;
  cursor: pointer;
}

.l-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  position: relative !important;
}
</style>
